<template>
	<view class="moive">
		<u-navbar class="ttp" title="选择影片" @leftClick="leftClick()" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="content">
			<view class="moive_box">
				<view v-for="(item,index) in molist" class="item">
					<view class="left">
						<image :src="item.cover" mode=""></image>
						<view class="info">
							<view class="name">
								{{item.filmName}}
							</view>
							<view class="about">
								评分：{{item.score}}
							</view>
							<view class="about">
								{{item.castType==0?'主演':'配音'}}：{{item.cast}}
							</view>
							<view class="detail">
								{{item.introduction}}
							</view>
						</view>
					</view>
					<view class="right">
						<view @click="choicecinema()" class="sell">
							购票
						</view>
						<!-- 	<view class="usell">
							预售
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFilmList,
		getCinema
	} from '@/api/oil'
	export default {
		data() {
			return {
				act: 0,
				molist: [],
				cinid: '',
			}
		},
		onLoad(option) {
			
			this.cinid = option.id;
			this.getFilmList()
		},
		methods: {
			getFilmList() {
				let sss = {
					type:0,
					cityid:this.cid
				}
				getFilmList(sss).then(res => {
					if (res.success == 1) {
						this.molist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			getCinema() {
				let data = {
					cityId: this.cid,
					longitude: this.userLngStr,
					latitude: this.userLatStr
				}
				getCinema(data).then(res => {
					if (res.success == 1) {
						this.cilist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			tabs(i) {
				this.act = i;
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				uni.navigateBack({})
			},
			choicecinema(){
				uni.navigateTo({
					url: `./moviechoice?id=${this.moid}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
	}

	.ttp{
		padding-top: var(--status-bar-height);
	}

	.moive {
		width: 100%;

		.content {
			padding: 20rpx;

			.tabs_box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-bottom: 40rpx;

				.tab {
					width: 180rpx;
					height: 56rpx;
					color: #979797;
					line-height: 56rpx;
					text-align: center;
					border: 2rpx solid #979797;
					border-radius: 30rpx;
					font-size: 34rpx;
				}

				.act {
					width: 184rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background: #FC713E;
					color: #FFFFFF;
					font-size: 34rpx;
					border-radius: 30rpx;
				}
			}

			.moive_box {
				// width: 100%;
				padding: 20rpx;

				.item {
					background: #FFFFFF;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.left {
						width: 80%;
						display: flex;
						align-items: center;

						image {
							width: 155rpx;
							height: 180rpx;
							margin-right: 30rpx;
							border-radius: 10rpx;
						}

						.info {
							width: 60%;

							.name {
								font-size: 34rpx;
							}

							.about {
								width: 100%;
								font-size: 22rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.detail {
								width: 100%;
								color: rgba(0, 0, 0, 0.3);
								font-size: 22rpx;
								display: -webkit-box;
								overflow: hidden;
								text-overflow: ellipsis;
								word-wrap: break-word;
								white-space: normal !important;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
					}

					.right {
						.sell {
							width: 110rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							color: #FFFFFF;
							background: #EB3E3D;
							border-radius: 20rpx;
							font-size: 30rpx;
						}

						.usell {
							width: 110rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							color: #FFFFFF;
							background: #389EE0;
							border-radius: 20rpx;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
</style>
